<template>
	<el-row>
		<div class="bg">
			<img :src="img" />
		</div>
		<el-row>
			<Vcode :show="vcode_show" @success='VcodeSuc' @fail='VcodeFail' />
			<el-col v-loading="loading" :span="7" class="Login-main">
				<el-row>
					<el-col :push='5'>
						<img style="width: 200px;" src="../../../assets/img/Sys/logo.svg" />
					</el-col>
				</el-row>
				<el-tabs v-model="activeName">
					<el-tab-pane label="登录" name="first">
						<el-form ref="form" :model="login_form" label-width="80px">
							<el-form-item label="用户名">
								<el-input placeholder="用户名" v-model="login_form.username" clearable></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input placeholder="请输入密码" v-model="login_form.pwd" show-password></el-input>
							</el-form-item>
							<el-form-item label="记住密码">
								<el-switch v-model="value">
								</el-switch>
							</el-form-item>
						</el-form>
						<el-row type="flex" justify="center">
							<el-button @click="toRoot" round type="primary" style="width: 10vw;">登录</el-button>
						</el-row>
					</el-tab-pane>
					<!-- <el-tab-pane label="注册" name="second">
						<el-form ref="form" :model="register_form" label-width="80px">
							<el-form-item label="用户名">
								<el-input placeholder="用户名" v-model="register_form.user" clearable></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input placeholder="请输入密码" v-model="register_form.password" show-password></el-input>
							</el-form-item>
							<el-form-item label="确认密码">
								<el-input placeholder="请输入密码" v-model="register_form.repassword" show-password>
								</el-input>
							</el-form-item>
							<el-form-item label="电话">
								<el-input placeholder="电话" v-model="register_form.phone" clearable></el-input>
							</el-form-item>

						</el-form>
						<el-row type="flex" justify="center">
							<el-button @click="RegisterClick" round type="primary" style="width: 10vw;">注册</el-button>
						</el-row>
					</el-tab-pane> -->
				</el-tabs>
			</el-col>
		</el-row>
	</el-row>
</template>

<script>
	import Vcode from "vue-puzzle-vcode";
	export default {
		components: {
			Vcode
		},
		data() {
			return {
				loading: false,
				vcode_show: false,
				img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
				activeName: 'first',
				value: '',
				login_form: { //登录表单
					username: '',
					pwd: ''
				},
				register_form: { //注册表单
					user: '',
					password: '',
					repassword: '',
					phone: ''
				}
			}
		},
		methods: {
			NotifySuc() {
				this.$notify({
					title: '注册成功',
					type: 'success',
					showClose: false,
					duration: 1300,
				});
			},
			toRoot() { //登录按钮
				this.vcode_show = true //打开滑动验证 逻辑见 VcodeSuc()
			},
			RegisterClick() { //注册按钮点击
				this.loading = true
				setTimeout(() => { //模拟接口
					this.loading = false
					this.activeName = 'first'
					this.register_form = {}
					this.NotifySuc()
				}, 300)
			},
			async VcodeSuc(res) { //验证通过
				let login = await this.$model.get('/seller/login')
				if (login.msg == "success") {
					this.$store.commit('setUser', this.login_form) //添加用户信息到全局
					this.vcode_show = false
					setTimeout(_ => { //不进行延时 滑动验证有概率无法关闭
						if (!this.vcode_show) { //追加检验滑动验证是否关闭
							if (this.$store.getters.getLookPush > 0) { //查看全局中是否有商品id 如果有跳转到商品界面
								let id = this.$store.getters.getLookPush
								this.$store.commit('relLookPush')
								this.$router.push('/ListItem/ParticularIng?id=' + id)
							} else {
								this.$router.push('/Center/Index')
							}
						}
					}, 50)
				} else {
					this.vcode_show = false
				}

			},
			VcodeFail(res) { //验证失败
				setTimeout(() => {
					this.vcode_show = false
				}, 800)
			}

		}
	}
</script>

<style scoped lang="scss">
	@import 'Login.scss'
</style>
